<template>
  <!-- <div> -->
  <el-aside class="el-aside" :width="!isCollapse ? '200px' : '64px'">
    <el-menu
      :default-active="activeIndex"
      popper-effect="light"
      router
      class="el-menu-demo"
      :collapse="isCollapse"
      :default-openeds="['5', '9']"
    >
      <el-menu-item index="1" :route="{ name: '基本配置' }">
        <el-icon>
          <Setting></Setting>
        </el-icon>
        <template #title>基本配置</template>
      </el-menu-item>
      <el-menu-item index="2" :route="{ name: '团队配置' }">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-yonghu1" />
        </svg>
        <template #title>成员配置</template>
      </el-menu-item>
      <el-menu-item index="6" :route="{ name: '权限配置' }">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-tiku" />
        </svg>
        <template #title>功能配置</template>
      </el-menu-item>
      <el-menu-item index="3" :route="{ name: '资料管理' }">
        <el-icon>
          <Files />
        </el-icon>
        <template #title>资料管理</template>
      </el-menu-item>

      <el-menu-item index="4" :route="{ name: '课程配置' }">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-tiku" />
        </svg>
        <template #title>课程配置</template>
      </el-menu-item>

      <el-sub-menu index="5">
        <template #title>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-16" />
          </svg>
          <span>题库配置</span>
        </template>
        <el-menu-item index="7" :route="{ name: '题目配置' }">
          <template #title>题目配置</template>
        </el-menu-item>
        <el-menu-item index="8" :route="{ name: '专题配置' }">
          <template #title>专题配置</template>
        </el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="9">
        <template #title>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <span>活动配置</span>
        </template>
        <el-menu-item index="10" :route="{ name: '任务配置' }">
          <template #title>任务配置</template>
        </el-menu-item>
        <el-menu-item index="11" :route="{ name: '比赛配置' }">
          <template #title>比赛配置</template>
        </el-menu-item>
      </el-sub-menu>
      <!-- 暂时屏蔽外部团队的AI功能 -->
      <!-- <el-menu-item index="12" :route="{ name: '日志(AI)' }">
        <el-icon>
          <List />
        </el-icon>
        <template #title>日志(AI)</template>
      </el-menu-item> -->
      <el-menu-item index="13" :route="{ name: '团队大数据' }">
        <el-icon>
          <List />
        </el-icon>
        <template #title>团队大数据</template>
      </el-menu-item>
      <el-menu-item
        class="isCollapse"
        :route="route"
        @click="() => setisCollapse(!isCollapse)"
      >
        <el-icon>
          <ArrowLeft v-show="!isCollapse"></ArrowLeft>
          <ArrowRight v-show="isCollapse"></ArrowRight>
        </el-icon>
        <template #title>收回</template>
      </el-menu-item>
    </el-menu>
  </el-aside>
  <!-- </div> -->
</template>

<script setup lang="ts">
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
import { ElAside, ElMenu, ElMenuItem } from "element-plus";
import { computed, ref } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import { Storekey } from "../../interface";
// import { routeCfg } from "../router";

type P = {
  isCollapse: boolean;
  setisCollapse: Function;
};
defineProps<P>();
const route = useRoute();

const activeIndex = ref("");

const store = useStore(Storekey);
const user = computed(() => store.state.user);

function open() {
  if (!user.value?.teamid) {
    return;
  }
  window.open("teamchart?teamid=" + user.value?.teamid, "_blank");
}
</script>

<style scoped>
.el-menu-demo {
  min-height: 100%;
  overflow-y: auto;
  --el-menu-bg-color: #333;
  --el-menu-text-color: #eee;
  --el-menu-active-color: #fff;
  --el-menu-hover-bg-color: #1561af;
}

.el-menu-item.is-active {
  background-color: var(--el-color-primary);
  color: #eee;
}

.w-200 {
  width: 200px;
  overflow: hidden;
}

.w-64 {
  width: 64px;
  overflow: hidden;
}

.el-aside {
  transition: all 0.3s;
}

.icon {
  margin-right: 5px;
  width: 24px;
  text-align: center;
  font-size: 18px;
  vertical-align: middle;
}
</style>
